var skill_1 = document.querySelector("#skill");
var skill_2 = document.querySelector("#skill-1");
var skill_3 = document.querySelector("#skill-2");
var skill_4 = document.querySelector("#skill-3");
var i = document.querySelector("#i");
var i2 = document.querySelector("#i-1");
var i3 = document.querySelector("#i-2");
var i4 = document.querySelector("#i-3");
function a() {
    skill_2.style.display = "none";
    skill_3.style.display = "none";
    skill_4.style.display = "none";
    skill_2.style.display = "none";
    i2.style.transform = "rotate(0deg)";
    i3.style.transform = "rotate(0deg)";
    i4.style.transform = "rotate(0deg)";
    if(skill_1.style.display=="block"){
        skill_1.style.display="none";
        i.style.transform = "rotate(0deg)";
    }else {
        skill_1.style.display="block";
        i.style.transform = "rotate(180deg)";
    }
}
function b() {

    if(skill_2.style.display=="block"){
        skill_2.style.display="none";
        i2.style.transform = "rotate(0deg)";
    }else {
        skill_2.style.display="block";
        i2.style.transform = "rotate(180deg)";
    }
    skill_1.style.display = "none";
    skill_3.style.display = "none";
    skill_4.style.display = "none";
    i.style.transform = "rotate(0deg)";
    i3.style.transform = "rotate(0deg)";
    i4.style.transform = "rotate(0deg)";
}
function c() {

    if(skill_3.style.display=="block"){
        skill_3.style.display="none";
        i3.style.transform = "rotate(0deg)";
    }else {
        skill_3.style.display="block";
        i3.style.transform = "rotate(180deg)";
    }
    skill_1.style.display = "none";
    skill_2.style.display = "none";
    skill_4.style.display = "none";
    i2.style.transform = "rotate(0deg)";
    i4.style.transform = "rotate(0deg)";
    i.style.transform = "rotate(0deg)";
}
function d() {

    if(skill_4.style.display=="block"){
        skill_4.style.display="none";
        i4.style.transform = "rotate(0deg)";
    }else {
        skill_4.style.display="block";
        i4.style.transform = "rotate(180deg)";
    }
    skill_1.style.display = "none";
    skill_2.style.display = "none";
    skill_3.style.display = "none";
    i.style.transform = "rotate(0deg)";
    i2.style.transform = "rotate(0deg)";
    i3.style.transform = "rotate(0deg)";
}
// main-about部分
var s = document.querySelector(".a-1");
var dd = document.querySelector(".a-img");
s.addEventListener('mouseover',function () {
    dd.style.transform = "rotate(360deg)";
});
s.addEventListener('mouseout',function () {
    dd.style.transform = "rotate(0deg)";
});

var s1 = document.querySelector(".a-2");
var d1 = document.querySelector(".d-1");
s1.addEventListener('mouseover',function () {
    d1.style.transform = "rotate(360deg)";
});
s1.addEventListener('mouseout',function () {
    d1.style.transform = "rotate(0deg)";
});

var s2 = document.querySelector(".a-3");
var d2 = document.querySelector(".d-2");
s2.addEventListener('mouseover',function () {
    d2.style.transform = "rotate(360deg)";
});
s2.addEventListener('mouseout',function () {
    d2.style.transform = "rotate(0deg)";
});

var s3 = document.querySelector(".a-4");
var d3 = document.querySelector(".d-3");
s3.addEventListener('mouseover',function () {
    d3.style.transform = "rotate(360deg)";
});
s3.addEventListener('mouseout',function () {
    d3.style.transform = "rotate(0deg)";
});


var nav_right = document.querySelectorAll(".dian a");
window.onscroll= function(){
    var t= document.documentElement.scrollTop||document.body.scrollTop;
    console.log(t);
    for(var i = 0;i<nav_right.length;i++){
        nav_right[i].classList.remove('active');
    }
    if(t<789){
        nav_right[0].classList.add('active');
    }else if(t<1436){
        nav_right[1].classList.add('active');
    }else if(t<2212){
        nav_right[2].classList.add('active');
    }else if(t<2869){
        nav_right[3].classList.add('active');
    }else if(t<3639){
        nav_right[4].classList.add('active');
    }else if(t<4428){
        nav_right[5].classList.add('active');
    }
};




